<template>
  <!-- 活动专栏 -->
  <div class="activity">
    <!-- <img class="activity_bg" src="@/assets/images/activity_bg.png" alt="荣誉" /> -->
    <!-- 组件标题 -->
    <div class="title">
      <div class="text">ACTIVITY</div>
      <!-- <p>Through professional services to create value for customers at the same time to realize their own value and social value</p> -->
    </div>
    <div class="activity_box">
      <div class="activity_tu">
       <el-image class="activity_tu_bg" :src="activity_bg" fit="cover"></el-image>
        <div class="activity_info">
          <div class="activity_text">{{activity_info.synopsis}}</div>
          <div class="activity_time">
            <span>{{activity_info.add_time_arr[1]}}-{{activity_info.add_time_arr[2]}}</span>
            <div>{{activity_info.add_time_arr[0]}}</div>
          </div>
        </div>
      </div>
      <!-- <div class="activity_signUp">
        <h3>Make An Appointment</h3>
        <div class="input_item">
          <span>Name：</span>
          <input v-model="activity_name" type="text" />
        </div>
        <div class="input_item ">
          <span>Phone：</span>
          <input v-model="activity_mobile" type="text" />
        </div>
        <div class="input_item">
          <span>Address:</span>
          <input v-model="activity_address" type="text" />
        </div>
        <div class="submit" @click="activitySubmit">SUBMIT</div>
        <p>Note: The time of this activity is at{{activity_info.add_time2}}</p>
      </div> -->
    </div>
    <router-link class="more" :to="{name:'en_activity'}">
      <span>MORE</span>
      <!-- 箭头背景 -->
      <i></i>
    </router-link>
  </div>
</template>
<script>
import {
  activity_cate,
  activity_list,
  activity_recruit_add,
} from "@/api/activity.js";
export default {
  data() {
    return {
        activity_bg:require('@/assets/images/activity_tu.png'),
      activity_info: {
        add_time_arr: ["2020", "07", "02"],
      }, //活动信息
      activity_name: "",
      activity_mobile: "",
      activity_address: "",
    };
  },
  mounted() {
    // 获取活动信息
    this.getActivity_cate();
  },
  methods: {
    //活动分类 列表
    getActivity_cate() {
      activity_cate().then((res) => {
        activity_list({ cid: res.data.data[0].id, page: 1, limit: 1 }).then(
          (ress) => {
             ress.data.data[0].add_time_arr = this.formatDate(
              ress.data.data[0].add_time
            )[0];
            ress.data.data[0].add_time2 = this.formatDate(
              ress.data.data[0].add_time
            )[1];
            // ress.data.data[0].add_time_arr = ress.data.data[0].add_time.split(
            //   "/"
            // );
            this.activity_info = ress.data.data[0];
          }
        );
      });
    },
    /**
     *
     * 转时间轴封装
     */
    formatDate(nows) {
      let that = this;
      var add0 = function (m) {
        return m < 10 ? "0" + m : m;
      };
      var now = new Date(nows * 1000);
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var date = now.getDate();
      var hour = now.getHours();
      var minute = now.getMinutes();
      var second = now.getSeconds();
      // add0(hour) +":" +add0(minute)
      return [
        [year, add0(month), add0(date)],
        `${year}-${add0(month)}-${add0(date)}`,
      ];
    },
    //点击活动报名
    activitySubmit() {
      if (!this.activity_name) {
        return this.$message("Please type in your name");
      }
      let myregMobile = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
      if (!this.activity_mobile || !myregMobile.test(this.activity_mobile)) {
        return this.$message("Please enter the correct contact information");
      }
      if (!this.activity_address) {
        return this.$message("Please enter the address");
      }
      activity_recruit_add({
        aid: this.activity_info.id,
        name: this.activity_name,
        mobile: this.activity_mobile,
        address: this.activity_address,
      }).then((res) => {
        if (res.data.sta == 1) {
          this.activity_name = null;
          this.activity_mobile = null;
          this.activity_address = null;
          return this.$message({
            showClose: true,
            message: "Thank you for your participation",
            type: "success",
          });
        } else {
          return this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        }
      });
    },
  },
};
</script>
<style scoped src="./sass/home.css"></style>